<!doctype html>
<html class="no-js" lang="en">
<head>
    <!--添加收藏表-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>boo02</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="../../assetsimages/x-icon/agricul.png">
    <link rel="stylesheet" href="../../assets/css/relys/animate.css">
    <link rel="stylesheet" href="../../assets/css/relys/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/css/relys/all.min.css">
    <link rel="stylesheet" href="../../assets/css/relys/icofont.min.css">
    <link rel="stylesheet" href="../../assets/css/relys/lightcase.css">
    <link rel="stylesheet" href="../../assets/css/relys/swiper.min.css">
    <link rel="stylesheet" href="../../assets/css/relys/style.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style type="text/css">
        .layui-form-label {
            width: 100px;
        }

        .form-box {
            padding-top: 90px;
            padding-bottom: 20px;
            width: 100%;
            background-color: #f8f8f8;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-box .form-content {
            width: 50%;
            height: auto;
            background: #FFF;
            padding: 40px 10%;
            position: relative;
        }

        .form-box .form-content .close-btn {
            position: absolute;
            width: auto !important;
            padding: 10px;
            background: #CCCCCC !important;
            color: #444;
            top: 40px;
            right: 10%;
        }

        .form-box .form-content .close-btn:hover {
            width: auto !important;
            padding: 10px;
            background: #CCCCCC !important;
        }

        .form-box .form-content h3 {
            width: 100%;
            text-align: center;
            margin-bottom: 40px;
        }

        .form-box .form-content .input-item {
            margin-bottom: 20px;
            display: flex;
        }

        .form-box .form-content .input-item input {
            height: 50px;
            line-height: 50px;
            flex: 1;
        }

        .form-box .form-content .input-item .input-name {
            padding: 0;
            width: 100px;
            height: 50px;
            line-height: 50px;
        }

        .form-box .form-content .input-item img {
            width: 150px;
            height: 150px;
            border-radius: 10px;
            margin-left: 20px;
            object-fit: cover;
        }

        .form-box .form-content button {
            background: #FE4847;
            color: #fff;
            border: 0;
            width: 100%;
        }

        .form-box .form-content button:hover {
            background: #292929;
            color: #fff;
        }

        .layui-upload-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="form-box layui-form" lay-filter="layform">
        <div class="form-control form-content">
            <h3>收藏表填写</h3>
            <div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收藏id</label>
                    <div class="layui-input-block">
                        <input v-model="detail.refid" type="text" name="title" lay-verify="title" autocomplete="off"
                               placeholder="请输入收藏id" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">表名</label>
                    <div class="layui-input-block">
                        <input v-model="detail.tablename" type="text" name="title" lay-verify="title" autocomplete="off"
                               placeholder="请输入表名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收藏名称</label>
                    <div class="layui-input-block">
                        <input v-model="detail.name" type="text" name="title" lay-verify="title" autocomplete="off"
                               placeholder="请输入收藏名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收藏图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="pictureupload-img" v-if="!detail.picture">上传图片
                        </button>
                        <div class="layui-upload-list" v-if="detail.picture">
                            <img class="layui-upload-img" id="pictureimg-temp"
                                 :src="detail.picture?detail.picture.split(',')[0]:''">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
            <button style="margin-bottom: 20px;" type="button" class="btn btn-default" @click="onConfirmTap">提交</button>
        </div>
    </div>
</div>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/vue.min.js"></script>
<script src="../../assets/js/api/api.js"></script>
<script src="../../assets/js/api/tplist.js"></script>
<script src="../../assets/js/api/defaultuser.js"></script>
<script src="../../assets/js/relys/utils.js"></script>
<script src="../../assets/js/relys/storage.js"></script>
<script src="../../layui/layui.js"></script>
<div id="script"></div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            crosstable: "",
            crosstableobj: {},
            detail: {
                userid: "",
                refid: "",
                tablename: "",
                name: "",
                picture: "",
            },
        },
        computed: {},
        updated() {
        },
        async created() {
            var id = getParam('id')
            var tablename = getParam('tablename')
            this.crosstable = tablename
            if (tablename) {
                var cross = JSON.parse(localStorage.getItem("crossObj"))
                this.crosstableobj = cross
                for (var key in cross) {
                    if ("userid" == key) {
                        this.detail[key] = cross[key]
                    }
                    if ("refid" == key) {
                        this.detail[key] = cross[key]
                    }
                    if ("tablename" == key) {
                        this.detail[key] = cross[key]
                    }
                    if ("name" == key) {
                        this.detail[key] = cross[key]
                    }
                    if ("picture" == key) {
                        this.detail[key] = cross[key]
                    }
                }
            } else if (id) {
                await this.getDetail(id, tablename)
            }


        },
        methods: {
            onPageTap(url) {
                window.location.href = url
            },
            updateTap(tablename, data) {
                return new Promise((resolve) => {
                    updateFun(tablename, data, (res) => {
                        if (res && res.code == 0) {
                            console.log("更新成功")
                            resolve(res)
                        }
                    })
                })

            },
            onConfirmTap() {
                addFun("storeup", this.detail, (res) => {
                    if (res && res.code == 0) {
                        alert("提交成功")
                    }
                })
            },


            getDetail(tablename, id) {
                return new Promise((resolve) => {
                    goodsInfo(tablename, id, (res) => {
                        this.detail = res.data
                        resolve(res)
                    })
                })
            }
        }
    })
    $(function () {


        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#pictureupload-img'
                , url: baseurl + "file/upload" //改成您自己的上传接口
                , headers: {
                    Token: getStorage("Token")
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#pictureimg-temp').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    } else {
                        app.detail.picture = baseurl + "/upload/" + res.file
                        return layer.msg('上传成功');
                    }
                    //上传成功
                }
            })
        });
        layui.use(['form', 'layedit'], function () {
            var form = layui.form,
                layedit = layui.layedit,
                $ = layui.jquery,
                layer = layui.layer;

        });
    });
</script>
</body>
</html>
